<template>
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff':''">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view class="flex-1">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.p067}}
				</view>
				<view class="flex-1">
				</view>
			</view>
			<view class="selectWrap py-3 pl-3 flex align-center" :class="model=='light'?'selectWrapLight':''">
				<view @click="open1" class="flex align-center mr-4">
					<view class="title A-Bold mr-1" :class="model=='light'?'titleLight':''">
						{{i18n.p016}}
					</view>
					<view class="f0">
						<image style="width: 14rpx;height: 8rpx;" :src="'/static/images/record/1_'+model+'.png'"
							mode=""></image>
					</view>
				</view>
				<view @click="open3" class="flex align-center mr-4">
					<view class="title A-Bold mr-1" :class="model=='light'?'titleLight':''">
						{{i18n2.m002}}
					</view>
					<view class="f0">
						<image style="width: 14rpx;height: 8rpx;" :src="'/static/images/record/1_'+model+'.png'"
							mode=""></image>
					</view>
				</view>
				<view @click="open2" class="flex align-center mr-4">
					<view class="title A-Bold mr-1" :class="model=='light'?'titleLight':''">
						{{i18n.p017}}
					</view>
					<view class="f0">
						<image style="width: 14rpx;height: 8rpx;" :src="'/static/images/record/1_'+model+'.png'"
							mode=""></image>
					</view>
				</view>
				
			</view>
		</view>
		<template v-for="(item,index) in orderList2">
			<!-- 竞猜 -->
			<view v-if="item.billType=='B01'" class="recordWrap A-Medium mx-3" :class="model=='light'?'recordWrapLight':''">
				<view class="flex align-center justify-between">
					<view class="text1 A-Regular">
						{{i18n3.l001}}{{i18n3.l010}}
					</view>
					<view class="text2">
						+{{item.billAmount}}{{item.coinType}}
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin-top: 12rpx;">
					<view class="text1 A-Medium">
						{{item.createTime}}
					</view>
					<view class="text1">
						<!-- -0.01usdt -->
					</view>
				</view>
			</view>
			<!-- 会员 -->
			<view v-if="item.billType=='B02'" class="recordWrap A-Medium mx-3" :class="model=='light'?'recordWrapLight':''">
				<view class="flex align-center justify-between">
					<view class="text1 A-Regular">
						{{i18n3.l002}}{{i18n3.l011}}
					</view>
					<view class="text3">
						{{item.billAmount}}{{item.coinType}}
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin-top: 12rpx;">
					<view class="text1">
						{{item.createTime}}
					</view>
					<view class="text1 A-Medium">
						<!-- -0.01usdt -->
					</view>
				</view>
			</view>
			<!-- 充值 -->
			<view v-if="item.billType=='B03'" class="recordWrap A-Medium mx-3" :class="model=='light'?'recordWrapLight':''">
				<view class="flex align-center justify-between">
					<view class="text1 A-Regular">
						{{i18n3.l003}}{{i18n3.l010}}
					</view>
					<view class="text2">
						{{item.billAmount}}{{item.coinType}}
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin-top: 12rpx;">
					<view class="text1 A-Medium">
						{{item.createTime}}
					</view>
					<view class="text1">
						<!-- -0.01usdt -->
					</view>
				</view>
			</view>
			<!-- 转账 -->
			<view v-if="item.billType=='B04'" class="recordWrap A-Medium mx-3" :class="model=='light'?'recordWrapLight':''">
				<view class="flex align-center justify-between">
					<view class="text1 A-Regular">
						{{i18n3.l004}}{{item.billAmount<0?i18n3.l011:i18n3.l010}}
					</view>
					<view :class="item.billAmount<0?'text3':'text2'">
						<text v-if="item.billAmount>=0">+</text> {{item.billAmount}}{{item.coinType}}
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin-top: 12rpx;">
					<view class="text1 A-Medium">
						{{i18n3.l012}}
					</view>
					<view class="text1">
						{{item.counterParty}}
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin-top: 12rpx;">
					<view class="text1 A-Medium">
						
					</view>
					<view class="text1 A-Medium">
						{{item.createTime}}
					</view>
				</view>
			</view>
			<!-- 提现 -->
			<view v-if="item.billType=='B05'" class="recordWrap A-Medium mx-3" :class="model=='light'?'recordWrapLight':''">
				<view class="flex align-center justify-between">
					<view class="text1 A-Regular">
						{{i18n3.l005}}{{i18n3.l011}}
					</view>
					<view class="text3">
						{{item.billAmount}}{{item.coinType}}
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin-top: 12rpx;">
					<view class="text1 A-Medium">
						{{item.createTime}}
					</view>
					<view class="text1">
						<!-- -0.01usdt -->
					</view>
				</view>
			</view>
			<!-- 现货交易 -->
			<view v-if="item.billType=='B06'" class="recordWrap A-Medium mx-3" :class="model=='light'?'recordWrapLight':''">
				<view class="flex align-center justify-between">
					<view class="text1 A-Regular">
						{{i18n3.l006}}{{i18n3.l011}}
					</view>
					<view class="text3">
						-{{item.spotBuyCoinAmount}}{{item.spotBuyCoinType}}
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin-top: 12rpx;">
					<view class="text1 A-Medium">
						{{item.createTime}}
					</view>
					<view class="text1 A-Medium">
						{{item.profitLossAmount}}{{item.spotBuyCoinType}}
					</view>
				</view>
			</view>
			<!-- 套利交易 -->
			<view v-if="item.billType=='B07'" class="recordWrap A-Medium mx-3" :class="model=='light'?'recordWrapLight':''">
				<view class="flex align-center justify-between">
					<view class="text1 A-Regular">
						{{i18n3.l007}}{{item.profitLossAmount<0?i18n3.l011:i18n3.l010}}
					</view>
					<view :class="item.profitLossAmount<0?'text3':'text2'">
						<text v-if="item.profitLossAmount>=0">+</text>{{item.profitLossAmount}}{{item.arbitrageCoinType}}
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin-top: 12rpx;">
					<view class="text1 A-Medium">
						{{item.createTime}}
					</view>
					<view class="text1">
						{{i18n3.l013}}{{item.arbitrageCoinType}}
					</view>
				</view>
			</view>
			<!-- 储蓄池 -->
			<view v-if="item.billType=='B08'" class="recordWrap A-Medium mx-3" :class="model=='light'?'recordWrapLight':''">
				<view class="flex align-center justify-between">
					<view class="text1 A-Regular">
						{{i18n3.l008}}{{item.profitLossAmount<0?i18n3.l011:i18n3.l010}}
					</view>
					<view :class="item.profitLossAmount<0?'text3':'text2'">
						<text v-if="item.profitLossAmount>=0">+</text>{{item.profitLossAmount}}{{item.arbitrageCoinType}}
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin-top: 12rpx;">
					<view class="text1 A-Medium">
						{{item.createTime}}
					</view>
					<view class="text1">
						<!-- -0.01usdt -->
					</view>
				</view>
			</view>
			<!-- 期权交易 -->
			<view v-if="item.billType=='B09'" class="recordWrap A-Medium mx-3" :class="model=='light'?'recordWrapLight':''">
				<view class="flex align-center justify-between">
					<view class="text1 A-Regular">
						{{i18n3.l009}}{{item.profitLossAmount<0?i18n3.l011:i18n3.l010}}
					</view>
					<view :class="item.profitLossAmount<0?'text3':'text2'">
						<text v-if="item.profitLossAmount>=0">+</text>{{item.profitLossAmount}}{{item.optionsCoinType}}
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin-top: 12rpx;">
					<view class="text1 A-Medium">
						{{item.createTime}}
					</view>
					<view class="text1 A-Medium">
						{{i18n3.l013}}{{item.optionsCoinType}}
					</view>
				</view>
			</view>
		</template>
		<view class="A-Medium text-alignC" style="font-size: 24rpx;color: #7F838D;">
			{{i18n.p023}}～
		</view>
		<sjPoup ref="sjPoup" @confirm="confirm2"></sjPoup>
		<bzPoup ref="bzPoup" @confirm="confirm1"></bzPoup>
		<ztPoup :type="5" ref="ztPoup" @confirm="confirm3"></ztPoup>
	</view>
</template>

<script>
	import {
		fullBillList
	} from '@/core/api/user.js';
	import bzPoup from '@/components/bzPoup.vue';
	import sjPoup from '@/components/sjPoup.vue';
	import ztPoup from '@/components/ztPoup.vue';
	export default {
		components:{
			bzPoup,
			sjPoup,
			ztPoup
		},
		data() {
			return {
				billType:'',
				coinType:'',
				pageNo2:1,
				pageSize2:15,
				startDate: '',
				endDate: '',
				isOpen1:false,
				isOpen2:false,
				isOpen3:false,
				orderList2:[],
			}
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		computed: {
			i18n() {
				return this.$t('property');
			},
			i18n2() {
				return this.$t('mine2');
			},
			i18n3() {
				return this.$t('last2');
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		onLoad() {
			this.getLiquidityCisternList();
		},
		onReachBottom() {
			this.pageNo2++;
			this.getLiquidityCisternList();
		},
		methods:{
			getLiquidityCisternList() {
				fullBillList({
					billType:this.billType,
					coinType:this.coinType,
					pageNo: this.pageNo2,
					pageSize: this.pageSize2,
					mobileUserId: uni.getStorageSync('mobileUserId'),
					startDate: this.startDate,
					endDate: this.endDate,
				}).then(res => {
					console.log(res, 'cs');
					let list = res.result.records;
					if (this.pageNo2 == 1) {
						this.orderList2 = list;
					} else {
						if (list.length == 0) {
							this.pageNo2--;
						} else {
							this.orderList2.push(...list);
						}
					}
				})
			},
			open1() {
				this.closePopup(1);
				if(this.isOpen1){
					this.closePopup(4);
				}else{
					this.$refs.bzPoup.open();
				}
				this.isOpen1 = !this.isOpen1;
			},
			open2() {
				this.closePopup(2);
				if(this.isOpen2){
					this.closePopup(4);
				}else{
					this.$refs.sjPoup.open();
				}
				this.isOpen2 = !this.isOpen2;
			},
			open3() {
				this.closePopup(3);
				if(this.isOpen3){
					this.closePopup(4);
				}else{
					this.$refs.ztPoup.open();
				}
				this.isOpen3 = !this.isOpen3;
			},
			closePopup(e) {
				if (e != 1) {
					this.$refs.bzPoup.closePopup();
				}
				if (e != 2) {
					this.$refs.sjPoup.closePopup();
				}
				if (e != 3) {
					this.$refs.ztPoup.closePopup();
				}
			},
			confirm1(e) {
				this.coinType = e.value;
				this.pageNo2 = 1;
				this.getLiquidityCisternList();
			},
			confirm2(e) {
				this.startDate = e.startDate;
				this.endDate = e.endDate;
				this.pageNo2 = 1;
				this.getLiquidityCisternList();
			},
			confirm3(e) {
				this.billType = e.value;
				this.pageNo2 = 1;
				this.getLiquidityCisternList();
			},
		}
	}
</script>

<style scoped lang="scss">
	.selectWrap {
		background: #0E0F11;
		.title {
			height: 34rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			color: #F7F7F7;
		}
		.titleLight {
			color: #0E0F11;
		}
	}
	.selectWrapLight {
		background: #E6E8EF;
	}

	.recordWrap {
		padding: 24rpx 30rpx;
		margin-bottom: 12rpx;

		.text1 {
			font-size: 24rpx;
			color: #7F838D;
		}

		.text2 {
			font-size: 28rpx;
			color: #D22540;
		}

		.text3 {
			font-size: 28rpx;
			color: #53D290;
		}
	}

	.recordWrapLight {}
</style>